{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "51ebb0f6-bfda-427c-a838-32a89d89369f",
   "metadata": {
    "tags": [
     "remove_cell"
    ]
   },
   "outputs": [],
   "source": [
    "import warnings\n",
    "warnings.filterwarnings(\"ignore\")"
   ]
  },
  {
   "attachments": {},
   "cell_type": "markdown",
   "id": "3ea7576e-1f54-4983-a8d1-1f6c0e2165de",
   "metadata": {},
   "source": [
    "Datapane has first-class Jupyter Notebook support. This includes Jupyter Lab, Jupyter Notebook, Google Colab, and Visual Studio Code with the Jupyter plugin.\n",
    "\n",
    "Let's see how Datapane and Jupyter Notebook can build data-powered apps, all without disrupting your workflow."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "e8275e34-e775-469f-b53a-a4e9bf5ed616",
   "metadata": {},
   "outputs": [],
   "source": [
    "import datapane as dp\n",
    "import altair as alt\n",
    "from vega_datasets import data"
   ]
  },
  {
   "attachments": {},
   "cell_type": "markdown",
   "id": "9d2e9759-b5db-4fe6-b58c-e1b10a39b21a",
   "metadata": {},
   "source": [
    "## Enhancing Notebooks\n",
    "\n",
    "Datapane Blocks are useful and they can be embedded straight into your notebook.\n",
    "\n",
    "### Interactive DataFrames\n",
    "\n",
    "The notebook journey often begins by loading in a dataset and displaying it for a quick sanity check. Something like the following:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "edf62892-dda1-4b3e-b958-b77c74be6d10",
   "metadata": {
    "tags": [
     "remove_input"
    ]
   },
   "outputs": [],
   "source": [
    "dp.Media(\n",
    "    file=\"../img/jupyter/dataframe-output.jpg\",\n",
    "    name=\"dataframe-output\",\n",
    "    caption=\"Default DataFrame output behaviour\",\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "846d9177-84d0-4121-a165-cf5f9f41e150",
   "metadata": {},
   "source": [
    "That's not bad, but it could be much better. Let's wrap our DataFrame in Datapane's `dp.DataTable` block and see what happens."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "2946fb8c-7683-4c0b-b962-91c2b67ba449",
   "metadata": {},
   "outputs": [],
   "source": [
    "df = data.iris()\n",
    "dp.DataTable(df)"
   ]
  },
  {
   "attachments": {},
   "cell_type": "markdown",
   "id": "84b4ac4f-6648-4b62-88ed-3df4296baf4c",
   "metadata": {},
   "source": [
    "Our DataFrame is now interactive. We can explore it with filters, sorting, export options, and even run SQL queries against the data.\n",
    "\n",
    "### Adding structure with Tabs\n",
    "\n",
    "Notebooks don't have to be a flood of in/out cells that are viewed from top to bottom. We can add depth to our notebooks with tabs.\n",
    "\n",
    "Let's create a scatter plot with our dataset from earlier..."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "26253118-525c-403c-ae94-87d777d1422f",
   "metadata": {},
   "outputs": [],
   "source": [
    "fig = (\n",
    "    alt.Chart(df)\n",
    "    .mark_point()\n",
    "    .encode(x=\"petalLength:Q\", y=\"petalWidth:Q\", color=\"species:N\")\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "2c3a6f47-c42e-49a3-8b54-bb5931f7213a",
   "metadata": {},
   "source": [
    "... and bring them both together with a `dp.Select` block."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "85bf2022-ce96-44b4-9de6-f179bed519c9",
   "metadata": {
    "tags": []
   },
   "outputs": [],
   "source": [
    "dp.Select(\n",
    "    blocks =[\n",
    "        dp.Plot(fig, label=\"Plot\"),\n",
    "        dp.DataTable(df, label=\"Data\")\n",
    "    ]\n",
    ")"
   ]
  },
  {
   "attachments": {},
   "cell_type": "markdown",
   "id": "ec6b989b-d774-4746-9042-87cbbab89df8",
   "metadata": {},
   "source": [
    "Now we have an interactive plot, and we can switch to that same interactive data explorer from earlier by clicking the \"Data\" tab.\n",
    "\n",
    "### Add even more Blocks\n",
    "\n",
    "Enhance your data reports with Datapane's [Blocks](https://docs.datapane.com/basic/blocks/), which includes the handy `dp.BigNumber` block."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "c1bbee21-3241-41d7-a7e2-d7551a47a5bc",
   "metadata": {},
   "outputs": [],
   "source": [
    "dp.Group(\n",
    "    dp.BigNumber(\n",
    "        heading=\"Percentage points\",\n",
    "        value=\"84%\",\n",
    "        change=\"2%\",\n",
    "        is_upward_change=True,\n",
    "    ),\n",
    "    dp.BigNumber(\n",
    "        heading=\"Points\",\n",
    "        value=\"1234\",\n",
    "        change=\"200\",\n",
    "        is_upward_change=False,\n",
    "    ),\n",
    "    columns=2,\n",
    ")"
   ]
  },
  {
   "attachments": {},
   "cell_type": "markdown",
   "id": "3c9dd778",
   "metadata": {},
   "source": [
    "## Convert Notebooks to Reports\n",
    "\n",
    "Data analysis often begins in a Jupyter Notebook, and once complete, we need to share our insights.\n",
    "\n",
    "Some recipients may be comfortable with an `.ipynb` file, and in those instances, you could just send your notebook over and still benefit from Datapane's enhancements.\n",
    "\n",
    "But in most cases, you will want to turn your notebook into something presentable and accessible. With Datapane, all it takes is a single line of code.\n",
    "\n",
    "```python\n",
    "view = dp.View.from_notebook()\n",
    "```\n",
    "\n",
    "Datapane will automatically detect your cells and convert them to a set of blocks which can be saved as a report.\n",
    "\n",
    "```python\n",
    "dp.upload_report(view, \"My Report\")\n",
    "```\n",
    "\n",
    "![Iris analysis to report](../img/jupyter/iris-analysis.png)\n",
    "\n",
    "### Opt-in or opt-out\n",
    "\n",
    "By default, notebook-to-report conversion will include all markdown and supported cell output. This is the easiest and quickest way to turn your notebook into an report. \n",
    "\n",
    "In this mode, you can explicitly exclude cells with the cell tag `dp-exclude`. \n",
    "\n",
    "![Exclude cells](../img/jupyter/exclude.png)\n",
    "\n",
    "In some cases, it is preferable to only include cells of interest. This can be achieved by setting `opt_out` to `False`, e.g.:\n",
    "\n",
    "```python\n",
    "blocks = dp.Blocks.from_notebook(opt_out=False)\n",
    "```\n",
    "\n",
    "In this mode, you can explicitly include supported cells with the cell tag `dp-include`.\n",
    "\n",
    "![Include cells](../img/jupyter/include.png)\n",
    "\n",
    "### Display input code\n",
    "\n",
    "You may want to display the input code for a particular cell in your report. Datapane has you covered. You can include code cells with the cell tag `dp-show-code`.\n",
    "\n",
    "![Show code](../img/jupyter/show-code.png)\n",
    "\n",
    "Let's do this for the cell below:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "45f54ff5",
   "metadata": {
    "tags": [
     "dp-show-code"
    ]
   },
   "outputs": [],
   "source": [
    "dp.Embed(url='https://www.youtube.com/watch?v=_KS_yZBI71s&t')"
   ]
  }
 ],
 "metadata": {
  "language_info": {
   "name": "python"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}
